<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<u-sticky>
			<view class="bgc-white p-20">
				<u-search placeholder="按关键字搜索" v-model="searchData.keywords" @change="onSearchChange"></u-search>
			</view>
		</u-sticky>

		<u-empty mode="list" v-if="listData.length === 0" :style="{height: `${screenHeight}px`}" />

		<scroll-view class="" v-if="!pageLoading && listData.length > 0" scroll-y refresher-enabled show-scrollbar
			:refresher-triggered="triggered" @refresherrefresh="$u.throttle(onRefresherrefresh, 200)"
			@scrolltolower='$u.throttle(onScrolltolower,1000)' :style="{height: `${screenHeight}px`}">
			<!-- 列表 -->
			<view class="p-l-30 p-r-30">
				<view class="item" v-for="(item, index) in listData" :key="index" @tap="itemClick(item)">
					<view>
						<view class="name">幅宽：{{item.widthValue}}{{item.widthUnitName}}</view>
						<view class="name">克重：{{item.gramWeightValue}}{{item.gramWeightUnitName}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listOptionsPageBySpuId
	} from '@/apis/goods/goods-width-gram-weight.js'

	export default {
		data() {
			return {
				searchData: {},
				spuId: null,
				screenHeight: 0,
				pageLoading: true,
				triggered: false,
				listData: [],
				pageInfo: {
					current: 1, // 当前页
					size: 10, // 每页数据条数
					sort: '', // 排序字段
					order: 'desc', // 排序方向
					total: 0 // 总数居量
				}
			}
		},
		onLoad() {
			const spuId = this.$Route.query.spuId
			this.spuId = spuId
			if (spuId) {
				this.$set(this.searchData, 'spuId', spuId)
				this.listPage()
			}
		},
		onReady() {
			const sysInfo = uni.getSystemInfoSync()
			this.screenHeight = sysInfo.windowHeight
		},
		methods: {
			listPage(params = {
				page: this.pageInfo,
				data: this.searchData
			}) {
				uni.showLoading({
					title: "加载中"
				})
				listOptionsPageBySpuId(params).then(res => {
					if (!res.data.flag) return
					const records = res.data.data.records || []
					this.listData.push(...records)
				}).finally(_ => {
					this.triggered = false
					this.pageLoading = false
					uni.hideLoading()
				})
			},
			itemClick(row) {
				uni.$emit("on-selected-goods-width-gram", row)
				this.$Router.back()
			},
			onSearchChange() {
				this.handlerSearch()
			},
			handlerSearch: _.debounce(function() {
				this.listData = []
				this.listPage()
			}, 300),
			onRefresherrefresh() {
				this.listData = []
				this.listPage()
			},
			onScrolltolower() {
				this.triggered = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		border-radius: 10rpx;
		background: #fff;
		padding: 30rpx;
		margin-top: 30rpx;

		.name {
			font-size: 40rpx;
		}
	}
</style>